/* eslint-disable react/react-in-jsx-scope */
import Taro , { Component } from '@tarojs/taro'
import { View , Image , Text} from '@tarojs/components'

import time_icon from '../../image/ic_time_grey.png'
import phone_icon from '../../image/ic_phone.png'

import BottomInfo from '../ItemBottomInfo/itemBottomInfo.js'
import doneIcon from '../../image/guoqi.png'
import topTag from '../../image/ic_top_tag.png'

import './carItem.scss'

import moment from 'moment';


export default class carItem extends Component {
  static options = {
    addGlobalClass: true
  }

  defaultProps = {
    carData : {}
  }

  makePhoneCall = (phoneNumber , e) =>{
    Taro.makePhoneCall({
      phoneNumber : phoneNumber
    })
    e.stopPropagation()  // 拦截事件冒泡
  }

  gotoCarDetail = (carData) => {
    Taro.navigateTo({
      url: `/pages/car/carDetail?carId=` + carData.id
    })
  }

  render() {
    let carData = this.props.carData;
    let routeData = carData.startAddress + ' -- ' + carData.tagAddress;

    let startDate = moment(carData.startDate).format('MM-DD HH:mm') + '出发';

    let peopleCount;
    let typeStyle;
    let typeText;
    if (carData.type == 0){
      peopleCount = carData.peopleCount + '人乘车';
      typeStyle = 'background-color: #4395f5;'
      typeText = '人找车'
    } else if (carData.type == 1) {
      peopleCount = carData.peopleCount + '个座位';
      typeStyle = 'background-color: cyan;'
      typeText = '车找人'
    }

    return (
        <View className='car-item-container' onClick={this.gotoCarDetail.bind(this , carData)}>
          <View className='car-item-container-sub'>
            <View className='car-item-route-container'>
              {/*<View className='car-item-line'/>*/}
              <View className='car-item-type-container' style={typeStyle}>
                <Text className='car-item-type-text'>{typeText}</Text>
              </View>
              <Text className='car-item-start-text'>{routeData}</Text>
            </View>
            <Text className='car-item-time'>{carData.releaseStrDate}</Text>
          </View>
          <View className='car-item-container-sub'>
            <View className='car-item-container-bottom'>
              <Image className='car-item-time-icon' src={time_icon}></Image>
              <Text className='car-item-start-text'>{startDate}</Text>
              <Text className='car-item-start-text'>{peopleCount}</Text>
            </View>
            <View className='car-item-phone' onClick={this.makePhoneCall.bind(this ,carData.mobile)}>
              <Image className='car-item-phone-icon' src={phone_icon}></Image>
              <Text className='car-item-phone-text'>电话</Text>
            </View>
          </View>
          <BottomInfo
            browseCount={carData.viewsCount}
            praiseCount={carData.praiseCount}
            shareCount={carData.shareCount}
            itemId={carData.id}
            itemType={2}
            hasPraise={carData.isPraise}
          />
          {carData.carStatus == 2 && <Image src={doneIcon} className='car-item-done'></Image>}
          <View className='car-item-divider'></View>
          {carData.isTop && <Image className='car-top-icon' src={topTag}></Image>}
        </View>
    )
  }
}
